<template>
  <div ref="scatterSingleAxisChartRef" :style="{width: '1000px',height: '600px'}"></div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, shallowRef, watch, nextTick} from 'vue';
import {ECharts, init} from "echarts";
import {useThemeConfig} from "/@/stores/themeConfig";
import {storeToRefs} from "pinia";
import theme from "/src/components/chart/theme";

export default defineComponent({
  name: 'ScatterSingleAxisChart',
  props: {
    data: {
      type: String,
      default: () => 'wangeditor',
    },
  },
  setup(props, {emit}) {
    const scatterSingleAxisChartRef = ref<HTMLElement>();
    const echartInstance = shallowRef<ECharts>();
    const storesThemeConfig = useThemeConfig();
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const state = reactive({
      theme: '',
      bgColor: 'transparent',
      titleColor: '#303133',
    });
    watch(() => themeConfig.value.isCollapse,
        (newVal) => {
          nextTick(() => {
            setTimeout(() => {
              initLineChart();
            }, 500);
          });
        },
        {
          deep: true,
          immediate: true,
        })
    onMounted(() => {
      setTimeout(() => {
        initLineChart();
      }, 500);
    });
    const initLineChart = () => {
      if (echartInstance.value) echartInstance.value.dispose();
      echartInstance.value = init(scatterSingleAxisChartRef.value, state.theme);

      const hours = [
        '1月', '2月', '3月', '4月', '5月', '6月', '7月',
        '8月', '9月', '10月', '11月', '12月',
      ];

// prettier-ignore
      const days = [
        '日常账本', '生意账本', '旅行账本',
        '装修账本', '宠物账本', '大病账本', '人情账本',
        '装修账本'
      ];

// prettier-ignore
      const data = [
        [0, 0, 453], [0, 1, 1242], [0, 2, 2333], [0, 3, 2312], [0, 4, 2345], [0, 5, 5647], [0, 6, 3432], [0, 7, 3423], [0, 8, 1123], [0, 9, 3432], [0, 10, 2313], [0, 11, 2334],
        [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2],
        [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2],
        [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4],
        [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4],
        [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1],
        [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0],
        [7, 0, 1], [7, 1, 0], [7, 2, 0], [7, 3, 0], [7, 4, 0], [7, 5, 0], [7, 6, 0], [7, 7, 0], [7, 8, 0], [7, 9, 0], [7, 10, 1], [7, 11, 0],
      ];

      const title: echarts.TitleComponentOption[] = [];
      const singleAxis: echarts.SingleAxisComponentOption[] = [];
      const series: echarts.ScatterSeriesOption[] = [];

      days.forEach(function (day, idx) {
        title.push({
          textBaseline: 'middle',
          top: ((idx + 0.5) * 100) / 7 + '%',
          text: day
        });
        singleAxis.push({
          left: 150,
          type: 'category',
          boundaryGap: false,
          data: hours,
          top: (idx * 100) / 7 + 5 + '%',
          height: 100 / 7 - 10 + '%',
          axisLabel: {
            interval: 2
          }
        });
        series.push({
          singleAxisIndex: idx,
          coordinateSystem: 'singleAxis',
          type: 'scatter',
          data: [],
          symbolSize: function (dataItem) {
            return dataItem[1] * 4;
          }
        });
      });

      data.forEach(function (dataItem) {
        (series as any)[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
      });

      const option = {
        color: theme.colors2,
        tooltip: {
          position: 'top'
        },
        title: title,
        singleAxis: singleAxis,
        series: series
      };
      echartInstance.value.setOption(option);
      window.addEventListener('resize', () => {
        echartInstance.value && echartInstance.value.resize()
      });
    };
    return {
      themeConfig,
      echartInstance,
      scatterSingleAxisChartRef,
      ...toRefs(state),
    };
  },
});
</script>
